<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">

        <h1>
            知识点1：v-on指令：鼠标单击事件
        </h1>

        <p>我已经被你点击了{{num}}次 </p>

        <button v-on:click="num++">点我点我</button>

        <button v-on:click="num--">点我我就减掉你</button>

        <h3>
            许多事件处理逻辑会更加复杂，所以复杂的逻辑直接把代码写在v-on指令中是不合适的
            因此，对于复杂的逻辑，可以把代码放在方法中，然后进行调用。
        </h3>

        <button v-on:click="logInfo">打印消息</button>

        <button v-on:click="logInfo('我好开心啊')">打印带参数的消息</button>

        <h3>
            v-on:可以简写为@
        </h3>

        <button @click="logInfo('我在学习vue，请鼓励我')"></button>

        <h1>
            知识点2：键盘事件keydown和keyup
        </h1>

        <input type="text" @keyup="show('我被释放了')">
        <input type="text" @keyup="show('我被按下了')">

        <h1>
            知识点3：其他事件：dblclick双击事件，contextmenu右击事件，mouseover鼠标上移事件，mouseout鼠标移出事件，blur失去焦点(看4-课堂小练习)
        </h1>

        <button @dblclick="num++">双击点我</button>
        <button @contextmenu="num++">右键点我</button>
        <button @mouseover="num++">鼠标移上来</button>
        <button @mouseout="num++">鼠标移来了</button>
        
        <h1>
            知识点4：事件修饰符
        </h1>

        <h3>
            1.  .once 事件修饰符，表示该事件只能被点击一次
        </h3>

        {{ num }}
        <button @click.once="num++">请相信我，你只能点一次</button>

        <h3>
            2.  .prevent 事件修饰符，当事件触发时，阻止元素默认的行为
        </h3>

        <h4>
            例子：submit有一个默认行为，即点击提交后，会重新加载页面，通过prevent可以阻止这个行为
        </h4>

        <form @submit.prevent="handleSubmit()">
            <h5>
                使用修饰符
            </h5>
            <button type="submit">提交</button>
        </form>

        <h3>3.  .stop 事件  阻止冒泡</h3>
        <h4>冒泡是内部元素事件被触发后，继续向外层触发事件</h4>
        
        <div id="box1" @click="box('我是box1')">box1
            <div id="box2" @click.stop="box('我是box2')">box2
                <div id="box3" @click.stop="box('我是box3')">box3</div>
            </div>
        </div>

        <h3>4.  .capture 事件捕获</h3>
        <h4>
            如果我们在层叠事件中想要先执行某个事件，可以使用capture修饰符。
            他是当前内部的元素被触发时，先处理capture修饰的事件，然后在提交当前事件捕获的顺序是由外到内
        </h4>

        <div id="box1" @click.capture="box('我是box1')">box1
            <div id="box2" @click.capture="box('我是box2')">box2
                <div id="box3" @click="box('我是box3')">box3</div>
            </div>
        </div>

        <h3>5.  .self 只在绑定了事件的那个对象层中使用</h3>
        
        <div id="box1" @click="box('我是box1')">box1
            <div id="box2" @click.self="box('我是box2')">box2
                <div id="box3" @click="box('我是box3')">box3</div>
            </div>
        </div>

        <h3>6.  监听键盘事件的按键修饰符</h3>

        <p>.enter  .tab  .space  .delete  .esc  .up  .down  .left  .right  .shift  .ctrl  .meat  .alt</p>
        <h4>当我们按下回车时，弹出ok</h4>
        <input type="text" @keydown.enter="box('ok')">
        <input type="text" @keydown.enter.alt="box('ok')">
        <p>当我们有多个修饰符时，需要同时按住才可触发</p>

        <h3>7.  鼠标修饰符</h3>
        <p>.left  .right  .middle</p>

    </div>
</body>
</html>


<script>
    const appConn = Vue.createApp({
        
        data() {
            return {
                num:0
            }
        },
            
        methods: {
            
            logInfo(Val){
                console.log(Val || "我的vue页面，你好");
            },

            show(val){
                console.log(val);
            },

            handleSubmit(){},

            box(val){
                alert(val)
            },
            
        },

    }).mount('#app')

</script>


<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: brown;
    }

    #box2{
        height: 150px;
        width: 250px;
        background-color: blue;
    }

    #box3{
        height: 100px;
        width: 200px;
        background-color: burlywood;
    }

</style>